<template>
  <!-- 积分商城页面 -->
  <view class="mycontainer">
    <!-- 搜索框 -->
    <view class="search-box">
      <u-search @custom="search" @search="search" v-model="keyword"></u-search>
    </view>
    <!-- 商品列表 -->
    <view class="goodlist">
      <!-- 商品item -->
      <view class="gooditem" v-for="(item,index) in goodList" :key="index">
        <my-good-item :good="item" :userInfo="userInfo"></my-good-item>
      </view>
    </view>
    <view style="margin-bottom: 150rpx;"></view>
    <!-- 自定义tabBar -->
    <view>
      <u-tabbar :value="tabBarIndex" :fixed="true" @change="tabBarchange" :placeholder="false" activeColor="#1296db"
        :safeAreaInsetBottom="false">
        <block v-for="(item,index) in tabBarList" :key="index">
          <u-tabbar-item :text="item.text">
            <image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.iconPath"></image>
            <image class="u-page__item__slot-icon" slot="active-icon" :src="item.selectedIconPath"></image>
          </u-tabbar-item>
        </block>
      </u-tabbar>
    </view>
  </view>
</template>

<script>
  // 按需导入 mapState ,mapMutations,mapGetters 辅助函数
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        keyword: '',
        goodList: [],
        
      };
    },
    computed: {
      // 将 m_user 模块中的 userType 数据映射到当前页面中使用
      ...mapState('m_user', ['userType', 'userInfo']),
      ...mapState('m_tabbar', ['tabBarList', 'tabBarIndex']),
    },
    onLoad() {
      // 获取积分商品列表
      this.getGoodsList();
    },
    methods: {
      // 搜索
      async search() {
        console.log(this.keyword);
        var key=this.keyword;
        const {data: res} = await uni.$http.post('/goods/getlikegoodslist',key)
        // 请求失败  弹框提醒
        if (res.status !== 200) return uni.$showMsg()
        // 请求成功  为noticeList  赋值
        this.goodList = res.data
      },
      async getGoodsList(cb) {
        // ** 打开节流阀
        this.isloading = true
        const {data: res} = await uni.$http.get('/goods/getgoodslist')
        // ** 关闭节流阀
        this.isloading = false
        // 只要数据请求完毕，就立即按需调用 cb 回调函数,cb() 是关闭下拉刷新的
        cb && cb()
        // 请求失败  弹框提醒
        if (res.status !== 200) return uni.$showMsg()
        // 请求成功  为noticeList  赋值
        this.goodList = res.data
      },
      // 下拉刷新的事件
      onPullDownRefresh() {
        // 1. 重置关键数据
        this.isloading = false;
        this.goodList=[];
        this.keyword='';
        // 2. 重新发起请求   传参（关闭下拉刷新，因为默认不关闭）
        this.getGoodsList(() => uni.stopPullDownRefresh())
      },
      ...mapMutations('m_tabbar', ['updateTabBarList', 'updateTabBarIndex']),
      tabBarchange(name) {
        uni.switchTab({
          url: this.tabBarList[name].pagePath
        })
        // this.tabBarIndex = name;
        this.setTabBarIndex(name);
      },
      setTabBarList(list) {
        this.updateTabBarList(list);
      },
      setTabBarIndex(index) {
        this.updateTabBarIndex(index);
      }
    },

  }
</script>

<style lang="scss">
  .mycontainer {
    margin: 30rpx;
    background-color: #f9f9f9;
  }

  // 实现搜索框的吸顶效果：
  .search-box {
    background-color: #f9f9f9;
    padding-bottom: 20rpx;
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .goodlist {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .gooditem {
    width: 40%;
    padding: 5%;
    height: 450rpx;

  }
  .u-page {
    padding: 0;
  
    &__item {
  
      &__title {
        color: $u-tips-color;
        background-color: $u-bg-color;
        padding: 30rpx;
        font-size: 30rpx;
  
        &__slot-title {
          color: $u-primary;
          font-size: 30rpx;
        }
      }
  
      &__slot-icon {
        width: 70rpx;
        height: 70rpx;
      }
    }
  }
</style>
